<template>
  <ProTable
    ref="tableRef"
    :fetchListApi="fetchListApi"
    :columns="columns"
    row-key="operId"
  >
    <template #toolbars>
      <Row class="w-full mr-3">
        <Col :span="16"> </Col>
        <Col :span="8" class="text-right content-center">
          <Space>
            <b-button
              icon="export"
              @click="onExport"
              code="monitor:operlog:export"
              >导出</b-button
            >
          </Space>
        </Col>
      </Row>
    </template>

    <template #operation="{ record }">
      <b-button
        icon="detail"
        type="link"
        @click="() => onView(record)"
        code="monitor:operlog:query"
        >详情</b-button
      >
    </template>
  </ProTable>
  <FormModal :items="items"> </FormModal>
</template>

<script setup lang="tsx">
import { computed, ref } from 'vue';
import { Col, Row, Space, Tag } from 'ant-design-vue';
import dayjs from 'dayjs';
import { ProFormProps } from '@/components/ProForm';
import { ProTable, ProTableProps } from '@/components/ProTable/index';
import { useFormModal } from '@/hooks/formModal';
import { download, listToEnum } from '@/utils/utils';
import { fetchCommonStatusDict, fetchOperationDict } from '@/api/dict';
import { exportOperationLogs, fetchOperationLogs } from '@/api/notice';

const tableRef = ref();

const fetchListApi = async (_params: any) => {
  const { operTime = [], ...params } = _params;
  if (operTime && operTime.length) {
    const [beginTime, endTime] = operTime;
    Object.assign(params, {
      params: { beginTime, endTime },
    });
  }
  return fetchOperationLogs({
    ...params,
  });
};

const commonStatusEnum = ref<Record<string, any>>({});
const operationEnum = ref<Record<string, any>>({});

const init = () => {
  fetchCommonStatusDict().then((res) => {
    commonStatusEnum.value = listToEnum(
      res.data as any,
      'dictValue',
      'dictLabel',
    );
  });
  fetchOperationDict().then((res) => {
    operationEnum.value = listToEnum(res.data as any, 'dictValue', 'dictLabel');
  });
};

init();

const onExport = async () => {
  const res = await exportOperationLogs();
  download(
    res as unknown as Blob,
    `logininfor_${dayjs().format('YYYY-MM-DD HH:mm:ss')}.xlsx`,
  );
};

const columns = computed<ProTableProps['columns']>(() => [
  {
    title: '日志编号',
    dataIndex: 'operId',
    hideInSearch: true,
    width: 120,
  },
  {
    title: '系统模块',
    dataIndex: 'title',
  },
  {
    title: '操作类型',
    dataIndex: 'businessType',
    width: 120,
    valueEnum: {
      ...operationEnum.value,
    },
    customRender({ text }) {
      return (
        <Tag color={text == '3' || text == '7' ? 'error' : 'processing'}>
          {operationEnum.value?.[text as keyof typeof operationEnum.value]}
        </Tag>
      );
    },
  },
  {
    title: '操作人员',
    dataIndex: 'operName',
  },
  {
    title: '操作地址',
    dataIndex: 'operIp',
    hideInSearch: true,
    width: 120,
  },
  {
    title: '操作地点',
    dataIndex: 'operLocation',
    hideInSearch: true,
  },
  {
    title: '操作状态',
    dataIndex: 'status',
    width: 100,
    valueEnum: {
      ...commonStatusEnum.value,
    },
    customRender({ text }) {
      return (
        <Tag color={text == '0' ? 'success' : 'error'}>
          {
            commonStatusEnum.value?.[
              text as keyof typeof commonStatusEnum.value
            ]
          }
        </Tag>
      );
    },
  },
  {
    title: '操作日期',
    dataIndex: 'operTime',
    isTime: true,
    width: 150,
  },
  {
    title: '操作',
    dataIndex: 'operation',
    hideInSearch: true,
    fixed: 'right',
    width: 80,
  },
]);

const items = computed<ProFormProps['items']>(() => [
  {
    label: '操作模块',
    type: 'input',
    field: 'title',
  },
  {
    label: '请求地址',
    type: 'input',
    field: 'operUrl',
  },
  {
    label: '登录信息',
    type: 'input',
    field: 'operName',
  },
  {
    label: '请求方式',
    type: 'input',
    field: 'requestMethod',
  },
  {
    label: '操作方法',
    type: 'input',
    field: 'method',
  },
  {
    label: '请求参数',
    type: 'input',
    field: 'operParam',
  },
  {
    label: '返回参数',
    type: 'input',
    field: 'jsonResult',
  },
  {
    label: '操作状态',
    type: 'input',
    field: 'status',
  },
  {
    label: '操作时间',
    type: 'input',
    field: 'operTime',
  },
]);

const { FormModal, open } = useFormModal({ size: 'small' });

const onView = async (record: any) => {
  const {
    title,
    businessType,
    operName,
    operIp,
    operLocation,
    status,
    ...others
  } = record;

  open({
    title: '详情',
    modalType: 'disabled',
    defaultValue: {
      ...others,
      title: `${title}/${operationEnum.value[businessType]}`,
      operName: `${operName}/${operIp}/${operLocation}`,
      status: commonStatusEnum.value[status],
    },
    serviceApi: () => Promise.resolve(''),
  });
};
</script>
